<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        min-height: 100vh;
      }
      /* 方式一 */
      .container {
        border: 4px solid;
        border-image-source: linear-gradient(to right, red, blue);
        border-image-slice: 1;
        height: 100px;
      }
      /* 方式二 */
      .border-box {
        border: 4px solid transparent;
        border-radius: 16px;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, red, blue);
      }
      /* 方式三 */
      .border-box-2 {
        border: 4px solid transparent;
        border-radius: 16px;
        position: relative;
        background-color: #fff;
        background-clip: padding-box; /*important*/
      }

      .border-box-2::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        margin: -4px;
        border-radius: inherit; /*important*/
        background: linear-gradient(90deg, red, blue);
      }
      div[data-abc] {
        background-color: red;
      }
    </style>
    <div class="container">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia molestiae unde non repellendus, totam ut, soluta
      culpa ex numquam, necessitatibus quas cumque libero sed cupiditate ipsa optio sunt doloribus! Voluptatum! Eveniet
      temporibus recusandae molestiae expedita blanditiis? Unde consequuntur dolore, mollitia nihil aut voluptates eaque
    </div>
    <br />

    <div class="border-box">
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
        saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
        accusamus tempora.
      </div>
    </div>

    <br />

    <div class="border-box-2">
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
        saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
        accusamus tempora.
      </div>
    </div>
    <br />

    <div data-abc="1">789798789</div>
  </body>
</html>
